<!-- 入园凭证 -->
<template>
	<view class="order-code" v-if="voucherInfo && voucherInfo.codes && voucherInfo.codes.length > 0">
		<!-- <voucher-info :voucherCodes="voucherInfo.codes" /> -->
		<view class="content" :class="{'one-person': isOneCode(voucherInfo.codes), 'more-person': !isOneCode(voucherInfo.codes)}">
			<view class="header">
				<view class="row">
					<image src="https://imgs.bestwehotel.com/images/inn/1bqPWym2fu" style="width:40rpx;height:40rpx;" />
					<view class="big-title">
						入园凭证码
					</view>					
				</view>
				<view class="row sub-title">
					{{!isOneCode(voucherInfo.codes) ? '该产品购买后一个客人一个核销码，该订单内的游客凭证码入园':'该产品购买后只会收到一个凭证码，该订单内的全部游客均可使用该凭证码入园'}}
				</view>				
			</view>
			<view class="person--wrap" v-if="!isOneCode(voucherInfo.codes)">
					<scroll-view :scroll-x="true" class="person-scroll">
							<basic-button 
								class="item"
								:type="selectperson==item ? 'primary':'tab'" 
								borderRadius="40rpx" 
								height="56rpx" 
								width="auto"
								v-for="(item, index) in persons" 
							    :key="index"
								@click="changePerson(item)"
							>
							  {{item}}
							</basic-button>	
					</scroll-view>					
			</view>
			<view class="code--wrap">
				<scroll-view :scroll-x="true" class="img-scroll">
					<view class="item" v-for="(item, index) in voucherInfo.codes" :key="index">
					    <image :src="item.code" style="width:312rpx;height:305rpx;" />						
					</view>
				</scroll-view>				
			</view>
		</view>		
	</view>
</template>
<script>
import { getVoucherInfo } from 'api'
export default {
	name: 'order-code',
	props: {
		orderNo: { type: String, default:null }
	},
	data() {
		return {
			voucherInfo: {},
			persons:[]
		}
	},
	mounted() {
		this.getVoucher()
	},
	methods: {	
		isOneCode(val){
			if(val&&val.length == 1) return true
			return false
		},	
		getVoucher() {
			getVoucherInfo({ orderNo: this.orderNo }).then(res=>{
				this.voucherInfo = res.result// res.result
			})
		},
		changePerson(item){
			this.selectperson = item
		}
	}
}
</script>
<style lang="less">
.order-code{
	background: #fff;
	padding: 18rpx 20rpx;
	margin-bottom: 30rpx;
	.header{
		padding: 30rpx 40rpx;
	}
	.one-person{
		width: 710rpx;
		height: 678rpx;
		background: url('https://imgs.bestwehotel.com/images/inn/1bqPTfwR8i');
		background-repeat: no-repeat;
		background-size: 710rpx 678rpx ;
	}
	.more-person{
		width: 710rpx;
		height: 773rpx;
		background: url('https://imgs.bestwehotel.com/images/inn/1bqPR8cy1Z');
		background-size: 710rpx 773rpx ;
	}
	.row{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
	}
	.big-title{		
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.sub-title{		
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666;
		margin-top: 8rpx;
	}
	.person--wrap{		
       white-space:nowrap;
	}
	.person-scroll{
		height: 80rpx;
		width: 630rpx;
		padding: 0 40rpx;
		.item{
			display: inline-block;
			margin-right: 20rpx;
		}
	}
	.img-scroll{
		height: 490rpx;
		width: 630rpx;
		padding: 0 40rpx;
		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}
	}
	.code--wrap{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column
	}
}
</style>